<template>
	<view>
		<view class="category-container">
			<!-- 左侧的滚动视图区域 -->
			<scroll-view class="category-left-view" scroll-y>
				<!-- 一级分类 -->
				<view :class="`left-view-item ${activeIndex === index ? 'active' : ''}`"
					v-for="(item,index) in categoryList" :key="item.id" @click="updateActive" data-index="{{ index }}">
					{{ item.name }}
				</view>
			</scroll-view>

			<!-- 右侧的滚动视图区域 -->
			<scroll-view class="category-right-view" scroll-y>
				<!-- 二级分类 -->
				<view>
					<view v-for="(item,index) in categoryList[activeIndex].children" :key="item.id"
						class="right-view-item">
						<navigator class="navigator"
							:url="`/modules/goodModule/pages/goods/list/list?category2Id=${item.id}`">
							<image class="" :src="item.imageUrl"></image>
							<text class="goods_item_name">{{ item.name }}</text>
						</navigator>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import http from '@/utils/http.js'
	import { reqCategoryData } from '@/api/category.js'

	let categoryList = ref([
		[
			{ children: [] }
		]
	]) // 商品分类列表数据
	let activeIndex = ref(0) // 当前激活的索引,默认为第一项

	// 一级分类切换效果
	const updateActive = (e) => {
		activeIndex.value = e.currentTarget.dataset.index
	}

	// 获取商品分类数据
	const getCategoryData = async () => {
		let res = await reqCategoryData('/index/findCategoryTree')
		if (res.code == 200) {
			categoryList.value = res.data
		}
	}

	onLoad(() => {
		getCategoryData()
	})
</script>

<style lang="scss" scoped>
	.category-container {
		display: flex;

		// 左侧一级分类
		.category-left-view {
			width: 220rpx;
			height: 100vh;
			background: #fff !important;

			.left-view-item {
				line-height: 99rpx;
				text-align: center;
				font-size: 26rpx;
			}

			.active {
				background-color: #ffffff;
				position: relative;
				color: #f3514f;

				&::before {
					content: ' ';
					display: block;
					width: 6rpx;
					height: 66rpx;
					background-color: #f3514f;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		// 右侧二级分类
		.category-right-view {
			width: 100%;
			height: 100vh;
			flex-wrap: wrap;
			background: #fff !important;
			margin-left: 8rpx;

			.right-view-item {
				width: 33%;
				float: left;
				margin-top: 30rpx;

				.navigator {
					display: flex;
					flex-direction: column;
					align-items: center;
				}

				image {
					width: 90rpx;
					height: 90rpx;
				}

				text {
					font-size: 26rpx;
					margin-top: 18rpx;
				}
			}
		}
	}
</style>